<template>
  <div class="test-video">
    <h1>video测试</h1>
    <!-- 录制音频 -->
    <div class="record-audio">
      <button @click="startRecord">开始录制</button>
      <button @click="stopRecord">停止录制</button>
      <audio id="my-audio" controls autoplay loop></audio>
    </div>
    <!-- 添加视频 -->
    <video
      ref="video"
      id="my-video"
      controls
      autoplay
      loop
      height="300"
      width="400"
      class="video"
    ></video>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";

const video = ref<HTMLVideoElement>();

onMounted(() => {
  setTimeout(() => {
    if (video.value) {
      video.value.src =
        "http://49.234.58.117:9000/c2df4ca9-f750-4538-8044-01fc9899dc12.mp4";
    }
  }, 1000);
});

//视频播放有声音没图像解决方案
//http://49.234.58.117:9000/c2df4ca9-f750-4538-8044-01fc9899dc12.mp4

//MediaRecorder API 录制音频
const mediaRecorder = ref<MediaRecorder>();


// 开始录制
const startRecord = async () => {
  // navigator.mediaDevices
  //   .getUserMedia({ audio: true, video: false })
  //   .then((stream) => {
  //     const mediaRecorder = new MediaRecorder(stream);
  //     mediaRecorder.start();
  //     const chunks: Blob[] = [];
  //     mediaRecorder.ondataavailable = (e) => {
  //       chunks.push(e.data);
  //     };
  //     setTimeout(() => {
  //       mediaRecorder.stop();
  //       const blob = new Blob(chunks, { type: "audio/mp3" });
  //       const audio = document.createElement("audio");
  //       audio.src = URL.createObjectURL(blob);
  //       audio.controls = true;
  //       document.body.appendChild(audio);
  //     }, 5000);
  //   })
  //   .catch((error) => {
  //     console.log("Error: " + error);
  //   });

  // 获取录音设备列表
  const audioDevices = await navigator.mediaDevices.enumerateDevices();
  const mics = audioDevices.filter((d) => d.kind === "audioinput");
  // 提供设备选择 UI 供用户选择
  const selectedMic = mics[0];
  //根据选择配置进行获取流
  const constraints = {
    audio: {
      deviceId: selectedMic.deviceId,
    },
  };
  ElMessage.success("录音设备已选择");
  const stream = await navigator.mediaDevices.getUserMedia(constraints);
  // // 创建音频环境
  // const audioContext = new AudioContext();

  // // 创建流源节点
  // const source = audioContext.createMediaStreamSource(stream);

  // // 创建回声效果节点
  // const echo = audioContext.createConvolver();

  // // 连接处理链
  // source.connect(echo);
  // echo.connect(audioContext.destination);

  // // 加载回声冲击响应并应用
  // const impulseResponse = await fetch("impulse.wav");
  // const buffer = await impulseResponse.arrayBuffer();
  // const audioBuffer = await audioContext.decodeAudioData(buffer);
  // echo.buffer = audioBuffer;

  // 创建 MediaRecorder 实例
  mediaRecorder.value = new MediaRecorder(stream);

  //  开始录制
  mediaRecorder.value.start();
};

// 停止录制
const stopRecord = async () => {
  console.log("停止录制");
  if (!mediaRecorder.value) return;
  mediaRecorder.value.stop();
  // 监听数据可用事件
  mediaRecorder.value.ondataavailable = (e:any) => {
    // chunks.push(e.data);
    // console.log(chunks);
    const blob =  new Blob([e.data], { type: "audio/mp3" });
    const audio = document.getElementById("my-audio") as HTMLAudioElement;
    //下载录制的音频文件
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "audio.mp3";
    a.click();
    //播放录制的音频文件
    audio.src = URL.createObjectURL(blob);
    console.log(audio.src);
  };
};
</script>

<style scoped>
.test-video {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #ccc;
}
.record-audio {
  margin-top: 20px;
}
.video {
  margin-top: 20px;
  border: 1px solid #666;
}
</style>
